<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多彩贵州 - 旅游小程序</title>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Noto Sans SC', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
        }

        :root {
            --theme-color: #07c160;
            --theme-dark: #069c4d;
            --theme-light: #e5f7e8;
            --theme-secondary: #ff6b00;
            --bg-color: #f8f8f8;
            --card-bg: #ffffff;
            --text-dark: #333333;
            --text-gray: #666666;
            --text-light: #999999;
            --border-color: #eeeeee;
            --card-shadow: 0 4px 15px rgba(0,0,0,0.08);
            --transition: all 0.3s ease;
        }

        body {
            background-color: var(--bg-color);
            color: var(--text-dark);
            line-height: 1.6;
            margin: 0 auto;
            position: relative;
            min-height: 100vh;
            overflow-x: hidden;
        }

        /* 容器布局 */
        .app-container {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        /* 加载页样式 */
        .loading {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #1a6d3b, #07c160);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            flex-direction: column;
            transition: opacity 0.5s ease;
        }

        .loading-logo {
            width: 120px;
            height: 120px;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M50 15A35 35 0 1 0 50 85A35 35 0 1 0 50 15Z" fill="white"/><path d="M50 25A25 25 0 1 0 50 75A25 25 0 1 0 50 25Z" fill="%2307c160"/><path d="M60 50L45 60L40 45L55 40Z" fill="white"/></svg>') no-repeat center;
            background-size: contain;
            margin-bottom: 20px;
            animation: pulse 1.5s infinite;
        }

        .loading-spinner {
            width: 50px;
            height: 50px;
            border: 4px solid rgba(255,255,255,0.3);
            border-top: 4px solid white;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        .loading-text {
            color: white;
            margin-top: 25px;
            font-size: 20px;
            letter-spacing: 2px;
            font-weight: 300;
            text-align: center;
            text-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        @keyframes pulse {
            0% { transform: scale(0.95); opacity: 0.8; }
            50% { transform: scale(1.05); opacity: 1; }
            100% { transform: scale(0.95); opacity: 0.8; }
        }

        /* 主容器 */
        .container {
            display: none;
            flex: 1;
            padding: 0 0 15px;
            background-color: var(--bg-color);
            min-height: 100vh;
            animation: fadeIn 0.8s ease;
        }

        /* 顶部导航 */
        .top-nav {
            position: sticky;
            top: 0;
            background: linear-gradient(to right, var(--theme-dark), var(--theme-color));
            color: white;
            padding: 15px 5%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 50;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .nav-title {
            font-size: 20px;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .nav-title i {
            font-size: 24px;
        }

        .nav-actions {
            display: flex;
            gap: 15px;
        }

        .nav-btn {
            background: rgba(255,255,255,0.2);
            border: none;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: var(--transition);
        }

        .nav-btn:hover {
            background: rgba(255,255,255,0.3);
            transform: scale(1.05);
        }

        /* 轮播图容器 */
        .swiper-container {
            width: 90%;
            height: 300px;
            position: relative;
            margin: 0 auto 30px;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        }

        @media (max-width: 768px) {
            .swiper-container {
                height: 220px;
            }
        }

        .swiper-wrapper {
            display: flex;
            transition: transform 0.5s ease;
            height: 100%;
        }

        .swiper-slide {
            min-width: 100%;
            height: 100%;
            position: relative;
        }

        .swiper-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .swiper-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
            padding: 20px 15px 15px;
            color: white;
        }

        .swiper-title {
            font-size: 22px;
            font-weight: 500;
            margin-bottom: 5px;
        }

        .swiper-desc {
            font-size: 15px;
            opacity: 0.9;
        }

        .swiper-pagination {
            position: absolute;
            bottom: 15px;
            right: 15px;
            display: flex;
            gap: 8px;
        }

        .swiper-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: rgba(255,255,255,0.5);
            transition: var(--transition);
            cursor: pointer;
        }

        .swiper-dot.active {
            background: white;
            width: 20px;
            border-radius: 4px;
        }

        /* 搜索框样式 */
        .search-container {
            padding: 0 5%;
            margin: 15px auto 30px;
            position: relative;
            max-width: 800px;
        }

        .search-box {
            background: var(--card-bg);
            border-radius: 30px;
            padding: 0 20px;
            display: flex;
            align-items: center;
            box-shadow: var(--card-shadow);
            transition: var(--transition);
        }

        .search-box:focus-within {
            box-shadow: 0 0 0 3px rgba(7, 193, 96, 0.3);
        }

        .search-icon {
            color: var(--text-light);
            font-size: 18px;
        }

        .search-input {
            width: 100%;
            padding: 15px 12px;
            border: none;
            font-size: 16px;
            background: transparent;
            outline: none;
        }

        /* 景区展示样式 */
        .section {
            padding: 0 5%;
            margin-bottom: 40px;
        }

        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .section-title {
            font-size: 24px;
            color: var(--text-dark);
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 600;
        }

        .section-title i {
            color: var(--theme-color);
        }

        .section-more {
            color: var(--theme-color);
            font-size: 16px;
            display: flex;
            align-items: center;
            gap: 5px;
            cursor: pointer;
            transition: var(--transition);
        }

        .section-more:hover {
            transform: translateX(5px);
        }

        .grid-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 25px;
        }

        @media (max-width: 768px) {
            .grid-container {
                grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
                gap: 20px;
            }
        }

        .scenic-item {
            background: var(--card-bg);
            border-radius: 16px;
            overflow: hidden;
            box-shadow: var(--card-shadow);
            transition: var(--transition);
            cursor: pointer;
            position: relative;
        }

        .scenic-item:hover {
            transform: translateY(-8px);
            box-shadow: 0 15px 30px rgba(0,0,0,0.15);
        }

        .scenic-tag {
            position: absolute;
            top: 15px;
            left: 15px;
            background: var(--theme-secondary);
            color: white;
            font-size: 13px;
            padding: 5px 15px;
            border-radius: 20px;
            z-index: 2;
            font-weight: 500;
        }

        .scenic-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
            transition: transform 0.5s ease;
            display: block;
        }

        .scenic-item:hover .scenic-image {
            transform: scale(1.05);
        }

        .scenic-info {
            padding: 20px;
        }

        .city-name {
            color: var(--theme-color);
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .attraction-name {
            color: var(--text-gray);
            font-size: 15px;
            line-height: 1.6;
            margin-bottom: 8px;
            min-height: 48px;
        }

        .scenic-rating {
            display: flex;
            align-items: center;
            gap: 5px;
            color: #ffb400;
            font-size: 15px;
            margin-top: 10px;
        }

        /* 朋友圈样式 */
        .moment-container {
            background: var(--card-bg);
            padding: 20px;
            border-radius: 16px;
            margin-bottom: 25px;
            box-shadow: var(--card-shadow);
            transition: var(--transition);
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
        }

        .moment-container:hover {
            box-shadow: 0 8px 25px rgba(0,0,0,0.1);
        }

        .moment-header {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }

        .moment-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            margin-right: 15px;
            object-fit: cover;
            border: 2px solid var(--theme-light);
        }

        .moment-user {
            flex: 1;
        }

        .moment-username {
            font-weight: 600;
            color: var(--text-dark);
            margin-bottom: 5px;
            font-size: 18px;
        }

        .moment-time {
            color: var(--text-light);
            font-size: 14px;
        }

        .moment-content {
            margin: 20px 0;
            color: var(--text-dark);
            font-size: 16px;
            line-height: 1.7;
        }

        .moment-images {
            display: grid;
            gap: 8px;
            margin: 20px 0;
        }

        .moment-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
            border-radius: 10px;
            cursor: pointer;
            transition: var(--transition);
            display: block;
        }

        .moment-image:hover {
            transform: scale(1.02);
        }

        /* 不同图片数量的布局 */
        .moment-images[data-count="1"] {
            grid-template-columns: 1fr;
        }

        .moment-images[data-count="2"] {
            grid-template-columns: repeat(2, 1fr);
        }

        .moment-images[data-count="3"] {
            grid-template-columns: repeat(3, 1fr);
        }

        .moment-images[data-count="4"] {
            grid-template-columns: repeat(2, 1fr);
        }

        .moment-actions {
            display: flex;
            gap: 25px;
            color: var(--text-light);
            font-size: 16px;
            padding-top: 20px;
            border-top: 1px solid var(--border-color);
        }

        .moment-action {
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .moment-action:hover {
            color: var(--theme-color);
        }

        .liked {
            color: #1877f2;
        }

        /* 登录页面样式 */
        .auth-container {
            max-width: 500px;
            margin: 40px auto;
            padding: 40px 30px;
            background: var(--card-bg);
            border-radius: 20px;
            box-shadow: var(--card-shadow);
            animation: slideUp 0.5s ease;
        }

        .auth-title {
            text-align: center;
            color: var(--theme-color);
            margin-bottom: 30px;
            font-size: 28px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
        }

        .auth-logo {
            width: 100px;
            height: 100px;
            background: var(--theme-light);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--theme-color);
            font-size: 50px;
        }

        .form-group {
            margin-bottom: 25px;
        }

        .form-label {
            display: block;
            margin-bottom: 10px;
            color: var(--text-dark);
            font-weight: 500;
            font-size: 16px;
        }

        .form-input {
            width: 100%;
            padding: 15px 20px;
            border: 1px solid var(--border-color);
            border-radius: 12px;
            font-size: 16px;
            transition: var(--transition);
        }

        .form-input:focus {
            border-color: var(--theme-color);
            outline: none;
            box-shadow: 0 0 0 3px rgba(7, 193, 96, 0.2);
        }

        .submit-btn {
            width: 100%;
            padding: 16px;
            background: var(--theme-color);
            color: white;
            border: none;
            border-radius: 12px;
            font-size: 18px;
            font-weight: 500;
            cursor: pointer;
            transition: background 0.3s;
            margin-top: 15px;
        }

        .submit-btn:hover {
            background: var(--theme-dark);
        }

        .login-options {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
            font-size: 15px;
        }

        .login-option {
            color: var(--theme-color);
            cursor: pointer;
            transition: var(--transition);
        }

        .login-option:hover {
            text-decoration: underline;
        }

        .user-info {
            text-align: center;
            padding: 40px 30px;
            background: var(--card-bg);
            border-radius: 20px;
            box-shadow: var(--card-shadow);
            margin: 30px auto;
            max-width: 600px;
            animation: fadeIn 0.8s ease;
        }

        .avatar {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            margin-bottom: 25px;
            border: 4px solid var(--theme-color);
            object-fit: cover;
            box-shadow: 0 6px 15px rgba(7, 193, 96, 0.3);
        }

        .user-name {
            font-size: 28px;
            margin-bottom: 10px;
            color: var(--text-dark);
        }

        .user-bio {
            color: var(--text-gray);
            margin-bottom: 30px;
            font-size: 18px;
            max-width: 400px;
            margin: 0 auto 30px;
            line-height: 1.6;
        }

        .stats-container {
            display: flex;
            justify-content: center;
            gap: 40px;
            margin: 30px 0;
        }

        .stat-item {
            text-align: center;
            min-width: 90px;
        }

        .stat-value {
            font-size: 32px;
            font-weight: 700;
            color: var(--theme-color);
        }

        .stat-label {
            font-size: 16px;
            color: var(--text-gray);
            margin-top: 8px;
        }

        .nav-links {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-top: 30px;
        }

        .nav-link {
            padding: 16px;
            background: var(--theme-light);
            color: var(--theme-color);
            border-radius: 15px;
            text-decoration: none;
            font-size: 17px;
            font-weight: 500;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            transition: var(--transition);
        }

        .nav-link:hover {
            background: var(--theme-color);
            color: white;
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(7, 193, 96, 0.3);
        }

        .logout-btn {
            display: block;
            width: 100%;
            max-width: 250px;
            margin: 30px auto 0;
            padding: 12px;
            background: transparent;
            color: var(--text-gray);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            cursor: pointer;
            transition: var(--transition);
            font-size: 16px;
        }

        .logout-btn:hover {
            background: #f8f8f8;
            color: var(--theme-secondary);
            border-color: var(--theme-secondary);
        }

        /* 底部导航 */
        .nav-bar {
            position: fixed;
            bottom: 0;
            width: 100%;
            max-width: 1200px;
            height: 80px;
            background: var(--card-bg);
            display: flex;
            justify-content: space-around;
            align-items: center;
            box-shadow: 0 -5px 20px rgba(0,0,0,0.08);
            z-index: 100;
            border-top-left-radius: 25px;
            border-top-right-radius: 25px;
            left: 50%;
            transform: translateX(-50%);
        }

        @media (min-width: 1200px) {
            .nav-bar {
                border-radius: 25px;
                bottom: 20px;
                width: 95%;
            }
        }

        .nav-btn-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 90px;
            height: 100%;
            cursor: pointer;
            transition: var(--transition);
            position: relative;
        }

        .nav-btn-container.active {
            transform: translateY(-12px);
        }

        .nav-btn-container.active::before {
            content: '';
            position: absolute;
            top: -10px;
            width: 50px;
            height: 4px;
            background: var(--theme-color);
            border-radius: 3px;
        }

        .nav-btn-icon {
            font-size: 26px;
            color: var(--text-light);
            transition: var(--transition);
        }

        .nav-btn-container.active .nav-btn-icon {
            color: var(--theme-color);
            transform: scale(1.15);
        }

        .nav-btn-label {
            font-size: 14px;
            margin-top: 6px;
            color: var(--text-light);
            transition: var(--transition);
        }

        .nav-btn-container.active .nav-btn-label {
            color: var(--theme-color);
            font-weight: 500;
        }

        /* 动画 */
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes slideUp {
            from { 
                opacity: 0;
                transform: translateY(30px);
            }
            to { 
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            .section-title {
                font-size: 20px;
            }
            
            .auth-container {
                margin: 20px 15px;
                padding: 30px 20px;
            }
            
            .stats-container {
                gap: 20px;
            }
            
            .stat-value {
                font-size: 24px;
            }
            
            .nav-bar {
                height: 70px;
            }
            
            .nav-btn-container {
                width: 70px;
            }
            
            .swiper-title {
                font-size: 18px;
            }
            
            .swiper-desc {
                font-size: 14px;
            }
        }

        @media (max-width: 480px) {
            .grid-container {
                grid-template-columns: 1fr;
            }
            
            .nav-links {
                grid-template-columns: 1fr;
            }
            
            .section-title {
                font-size: 18px;
            }
            
            .stats-container {
                flex-direction: column;
                gap: 15px;
            }
            
            .nav-btn-container {
                width: 60px;
            }
            
            .nav-btn-icon {
                font-size: 22px;
            }
            
            .top-nav {
                padding: 12px 15px;
            }
        }
    </style>
</head>
<body>
    <div class="app-container">
        <!-- 加载页 -->
        <div class="loading">
            <div class="loading-logo"></div>
            <div class="loading-spinner"></div>
            <div class="loading-text">探索多彩贵州 · 体验独特风情</div>
        </div>

        <!-- 主容器 -->
        <div class="container">
            <!-- 顶部导航 -->
            <div class="top-nav">
                <div class="nav-title">
                    <i class="fas fa-mountain"></i>
                    <span id="pageTitle">首页</span>
                </div>
                <div class="nav-actions">
                    <button class="nav-btn">
                        <i class="fas fa-search"></i>
                    </button>
                    <button class="nav-btn">
                        <i class="fas fa-bell"></i>
                    </button>
                </div>
            </div>
            
            <!-- 首页 -->
            <div id="home" class="page">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <img src="https://img1.baidu.com/it/u=1315295965,4152789538&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1067h=600&q=80" class="swiper-image" alt="黄果树瀑布">
                            <div class="swiper-overlay">
                                <div class="swiper-title">黄果树瀑布</div>
                                <div class="swiper-desc">亚洲第一大瀑布，气势磅礴</div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <img src="https://qcloud.dpfile.com/pc/PJzSqGhxEtSWeZkHxYhbPsBZGfFLHu1-8wk_cQhzwQGv-GHOx_pUinGa_Fy-bwpn.jpg" class="swiper-image" alt="西江千户苗寨">
                            <div class="swiper-overlay">
                                <div class="swiper-title">西江千户苗寨</div>
                                <div class="swiper-desc">世界最大的苗族聚居村寨</div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <img src="https://qcloud.dpfile.com/pc/5-Ow9Lg6S_9qHLR6-D9GqeQjH_Cl7eQr2LRH1kt1k_Q0uBaAdUJKEuvovhEncoO8.jpg" class="swiper-image" alt="梵净山">
                            <div class="swiper-overlay">
                                <div class="swiper-title">梵净山</div>
                                <div class="swiper-desc">佛教圣地，世界自然遗产</div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-pagination"></div>
                </div>

                <div class="search-container">
                    <div class="search-box">
                        <i class="fas fa-search search-icon"></i>
                        <input type="text" class="search-input" placeholder="搜索景区/城市/美食..." id="searchInput">
                    </div>
                </div>

                <div class="section">
                    <div class="section-header">
                        <div class="section-title">
                            <i class="fas fa-fire"></i>
                            热门推荐
                        </div>
                        <div class="section-more">
                            查看更多 <i class="fas fa-chevron-right"></i>
                        </div>
                    </div>
                    <div class="grid-container">
                        <div class="scenic-item" onclick="showDetail('贵阳')">
                            <div class="scenic-tag">必游</div>
                            <img src="https://img1.baidu.com/it/u=3154512138,2591151209&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1200" class="scenic-image" alt="贵阳">
                            <div class="scenic-info">
                                <div class="city-name">
                                    <i class="fas fa-city"></i>
                                    贵阳
                                </div>
                                <div class="attraction-name">青岩古镇 / 黔灵山公园 / 天河潭</div>
                                <div class="scenic-rating">
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star-half-alt"></i>
                                    4.5
                                </div>
                            </div>
                        </div>

                        <div class="scenic-item" onclick="showDetail('遵义')">
                            <div class="scenic-tag">文化</div>
                            <img src="https://img2.baidu.com/it/u=3564123731,897290283&fm=253&fmt=auto&app=138&f=JPEG?w=700&h=500" class="scenic-image" alt="遵义">
                            <div class="scenic-info">
                                <div class="city-name">
                                    <i class="fas fa-city"></i>
                                    遵义
                                </div>
                                <div class="attraction-name">遵义会议会址 / 赤水丹霞 / 茅台镇</div>
                                <div class="scenic-rating">
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="far fa-star"></i>
                                    4.2
                                </div>
                            </div>
                        </div>

                        <div class="scenic-item" onclick="showDetail('六盘水')">
                            <div class="scenic-tag">避暑</div>
                            <img src="https://img2.baidu.com/it/u=1315991342,3520020436&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1061" class="scenic-image" alt="六盘水">
                            <div class="scenic-info">
                                <div class="city-name">
                                    <i class="fas fa-city"></i>
                                    六盘水
                                </div>
                                <div class="attraction-name">乌蒙大草原 / 妥乐古银杏 / 玉舍森林公园</div>
                                <div class="scenic-rating">
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star-half-alt"></i>
                                    4.6
                                </div>
                            </div>
                        </div>

                        <div class="scenic-item" onclick="showDetail('安顺')">
                            <div class="scenic-tag">必游</div>
                            <img src="https://img2.baidu.com/it/u=3237007225,676255351&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667" class="scenic-image" alt="安顺">
                            <div class="scenic-info">
                                <div class="city-name">
                                    <i class="fas fa-city"></i>
                                    安顺
                                </div>
                                <div class="attraction-name">黄果树瀑布 / 龙宫 / 天龙屯堡</div>
                                <div class="scenic-rating">
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    4.8
                                </div>
                            </div>
                        </div>

                        <div class="scenic-item" onclick="showDetail('毕节')">
                            <div class="scenic-tag">自然</div>
                            <img src="https://img2.baidu.com/it/u=2228473217,3063764291&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1424" class="scenic-image" alt="毕节">
                            <div class="scenic-info">
                                <div class="city-name">
                                    <i class="fas fa-city"></i>
                                    毕节
                                </div>
                                <div class="attraction-name">百里杜鹃 / 织金洞 / 草海自然保护区</div>
                                <div class="scenic-rating">
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="far fa-star"></i>
                                    4.3
                                </div>
                            </div>
                        </div>

                        <div class="scenic-item" onclick="showDetail('铜仁')">
                            <div class="scenic-tag">世界遗产</div>
                            <img src="https://img0.baidu.com/it/u=221279093,304439315&fm=253&fmt=auto&app=138&f=JPEG?w=721&h=500" class="scenic-image" alt="铜仁">
                            <div class="scenic-info">
                                <div class="city-name">
                                    <i class="fas fa-city"></i>
                                    铜仁
                                </div>
                                <div class="attraction-name">梵净山 / 大明边城 / 石阡温泉</div>
                                <div class="scenic-rating">
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star-half-alt"></i>
                                    4.7
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 发现页 -->
            <div id="discover" class="page" style="display:none;">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <img src="https://img1.baidu.com/it/u=918107474,2324481664&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667" class="swiper-image" alt="贵州美食">
                            <div class="swiper-overlay">
                                <div class="swiper-title">贵州美食之旅</div>
                                <div class="swiper-desc">探索舌尖上的贵州</div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <img src="https://img0.baidu.com/it/u=805906942,2457136646&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422" class="swiper-image" alt="民族风味">
                            <div class="swiper-overlay">
                                <div class="swiper-title">民族风味</div>
                                <div class="swiper-desc">体验多彩民族文化</div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
                
                <div class="section">
                    <div class="section-header">
                        <div class="section-title">
                            <i class="fas fa-utensils"></i>
                            美食朋友圈
                        </div>
                        <div class="section-more">
                            发布动态 <i class="fas fa-plus-circle"></i>
                        </div>
                    </div>
                    <div id="momentsList">
                        <!-- 朋友圈动态将通过JS生成 -->
                    </div>
                </div>
            </div>

            <!-- 我的页面 -->
            <div id="profile" class="page" style="display:none;">
                <div class="auth-container" id="loginContainer">
                    <div class="auth-title">
                        <div class="auth-logo">
                            <i class="fas fa-user"></i>
                        </div>
                        欢迎登录贵州旅游
                    </div>
                    <div class="form-group">
                        <label class="form-label">用户名</label>
                        <input type="text" class="form-input" placeholder="请输入用户名" id="username">
                    </div>
                    <div class="form-group">
                        <label class="form-label">密码</label>
                        <input type="password" class="form-input" placeholder="请输入密码" id="password">
                    </div>
                    <button class="submit-btn" onclick="login()">立即登录</button>
                    <div class="login-options">
                        <div class="login-option">忘记密码?</div>
                        <div class="login-option">注册账号</div>
                    </div>
                </div>

                <div class="user-info" id="userInfo">
                    <img src="https://randomuser.me/api/portraits/women/65.jpg" class="avatar" alt="用户头像">
                    <h2 class="user-name" id="nickname">游客</h2>
                    <p class="user-bio">贵州旅游达人 | 热爱探索自然与人文 | 已走遍贵州8个地州市</p>
                    
                    <div class="stats-container">
                        <div class="stat-item">
                            <div class="stat-value">12</div>
                            <div class="stat-label">去过景点</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-value">36</div>
                            <div class="stat-label">发布动态</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-value">128</div>
                            <div class="stat-label">获得点赞</div>
                        </div>
                    </div>
                    
                    <div class="nav-links">
                        <a href="#" class="nav-link" onclick="showPage('home')">
                            <i class="fas fa-home"></i>返回首页
                        </a>
                        <a href="#" class="nav-link" onclick="showPage('discover')">
                            <i class="fas fa-compass"></i>查看发现
                        </a>
                        <a href="#" class="nav-link">
                            <i class="fas fa-heart"></i>我的收藏
                        </a>
                        <a href="#" class="nav-link">
                            <i class="fas fa-cog"></i>设置
                        </a>
                    </div>
                    
                    <button class="logout-btn" onclick="logout()">
                        <i class="fas fa-sign-out-alt"></i> 退出登录
                    </button>
                </div>
            </div>
        </div>

        <!-- 底部导航 -->
        <div class="nav-bar">
            <div class="nav-btn-container active" data-page="home">
                <i class="fas fa-home nav-btn-icon"></i>
                <div class="nav-btn-label">首页</div>
            </div>
            <div class="nav-btn-container" data-page="discover">
                <i class="fas fa-compass nav-btn-icon"></i>
                <div class="nav-btn-label">发现</div>
            </div>
            <div class="nav-btn-container" data-page="profile">
                <i class="fas fa-user nav-btn-icon"></i>
                <div class="nav-btn-label">我的</div>
            </div>
        </div>
    </div>

    <script>
        // 初始化状态
        let currentUser = JSON.parse(localStorage.getItem('currentUser')) || null;
        let currentPage = 'home';
        let swiperIndex = 0;

        // 贵州美食数据
        const momentsData = [
            {
                user: "酸汤鱼爱好者",
                avatar: "https://randomuser.me/api/portraits/men/1.jpg",
                content: "凯里酸汤鱼真是绝了！汤鲜味美，鱼肉嫩滑，配上特制蘸水，完美！强烈推荐这家老字号店，汤底是用米汤自然发酵的，酸味纯正，鱼肉选用当地江鱼，肉质鲜嫩，入口即化。",
                images: ["https://img1.baidu.com/it/u=142223208,2558766395&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=335"],
                time: "2小时前",
                likes: 24,
                comments: 5
            },
            {
                user: "小吃探索家",
                avatar: "https://randomuser.me/api/portraits/women/2.jpg",
                content: "丝娃娃初体验！十几种小菜自己搭配，酸辣爽口超开胃～第一次尝试这种贵州特色小吃，薄饼包裹各种蔬菜丝，蘸上酸汤，清爽不腻，特别适合夏天！",
                images: ["https://img1.baidu.com/it/u=2338490149,2316590277&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667", "https://img0.baidu.com/it/u=751095546,1637323420&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667"],
                time: "4小时前",
                likes: 18,
                comments: 3
            },
            {
                user: "老贵阳",
                avatar: "https://randomuser.me/api/portraits/men/3.jpg",
                content: "肠旺面还是老字号的最正宗！血旺嫩，肥肠香，面条劲道！这家开了三十年的老店，每天凌晨四点就开始熬汤，汤头浓郁，配料丰富，绝对是贵阳早餐的首选！",
                images: ["https://img0.baidu.com/it/u=1328982015,210841301&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1067", "https://img2.baidu.com/it/u=2685273904,1141950924&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=656"],
                time: "6小时前",
                likes: 32,
                comments: 8
            },
            {
                user: "甜品控",
                avatar: "https://randomuser.me/api/portraits/women/4.jpg",
                content: "青岩古镇的玫瑰冰粉，清凉解暑还有淡淡花香，夏天必备！选用当地玫瑰花瓣，手工熬制糖浆，加上坚果碎和葡萄干，每一口都是享受。",
                images: ["https://img2.baidu.com/it/u=702018181,2086511436&fm=253&fmt=auto&app=120&f=JPEG?w=578&h=500"],
                time: "8小时前",
                likes: 21,
                comments: 4
            }
        ];

        // 页面加载时初始化
        window.onload = () => {
            setTimeout(initApp, 2500);
        };

        function initApp() {
            document.querySelector('.loading').style.opacity = '0';
            setTimeout(() => {
                document.querySelector('.loading').style.display = 'none';
                document.querySelector('.container').style.display = 'block';
            }, 500);
            
            checkLoginStatus();
            initSwiper();
            initNavigation();
            showPage(currentPage);
            renderMoments();
        }

        // 页面切换功能
        function showPage(pageId) {
            currentPage = pageId;
            document.querySelectorAll('.page').forEach(page => {
                page.style.display = 'none';
            });
            document.getElementById(pageId).style.display = 'block';
            updateNavigation();
            document.getElementById('pageTitle').textContent = 
                pageId === 'home' ? '首页' : 
                pageId === 'discover' ? '发现' : '我的';
        }

        // 导航栏状态更新
        function updateNavigation() {
            document.querySelectorAll('.nav-btn-container').forEach(btn => {
                btn.classList.remove('active');
            });
            document.querySelector(`.nav-btn-container[data-page="${currentPage}"]`).classList.add('active');
        }

        // 轮播图初始化
        function initSwiper() {
            const swiperWrappers = document.querySelectorAll('.swiper-wrapper');
            
            swiperWrappers.forEach(wrapper => {
                const slides = wrapper.querySelectorAll('.swiper-slide');
                const pagination = wrapper.parentElement.querySelector('.swiper-pagination');
                
                // 创建指示点
                pagination.innerHTML = '';
                slides.forEach((_, index) => {
                    const dot = document.createElement('div');
                    dot.className = `swiper-dot ${index === 0 ? 'active' : ''}`;
                    dot.onclick = () => goToSlide(index, wrapper);
                    pagination.appendChild(dot);
                });

                setInterval(() => {
                    swiperIndex = (swiperIndex + 1) % slides.length;
                    updateSwiper(wrapper);
                }, 5000);
            });
        }

        function updateSwiper(wrapper) {
            const slides = wrapper.querySelectorAll('.swiper-slide');
            const dots = wrapper.parentElement.querySelectorAll('.swiper-dot');
            
            wrapper.style.transform = `translateX(-${swiperIndex * 100}%)`;
            dots.forEach((dot, index) => {
                dot.classList.toggle('active', index === swiperIndex);
            });
        }

        function goToSlide(index, wrapper) {
            swiperIndex = index;
            updateSwiper(wrapper);
        }

        // 登录功能
        function login() {
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;

            if (!username || !password) {
                Swal.fire('错误', '请输入完整的登录信息', 'error');
                return;
            }

            // 模拟API请求
            setTimeout(() => {
                currentUser = {
                    username,
                    avatar: 'https://randomuser.me/api/portraits/women/65.jpg'
                };
                localStorage.setItem('currentUser', JSON.stringify(currentUser));
                checkLoginStatus();
                Swal.fire({
                    title: '登录成功',
                    text: '欢迎探索多彩贵州！',
                    icon: 'success',
                    timer: 1500,
                    showConfirmButton: false
                });
            }, 500);
        }

        // 退出登录
        function logout() {
            Swal.fire({
                title: '确定退出登录吗？',
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: 'var(--theme-color)',
                cancelButtonColor: '#999',
                confirmButtonText: '退出',
                cancelButtonText: '取消'
            }).then((result) => {
                if (result.isConfirmed) {
                    currentUser = null;
                    localStorage.removeItem('currentUser');
                    checkLoginStatus();
                    Swal.fire({
                        title: '已退出登录',
                        icon: 'success',
                        timer: 1000,
                        showConfirmButton: false
                    });
                }
            });
        }

        // 登录状态检查
        function checkLoginStatus() {
            const loginContainer = document.getElementById('loginContainer');
            const userInfo = document.getElementById('userInfo');
            
            if (currentUser) {
                loginContainer.style.display = 'none';
                userInfo.style.display = 'block';
                document.getElementById('nickname').textContent = currentUser.username;
                document.querySelector('.avatar').src = currentUser.avatar;
            } else {
                loginContainer.style.display = 'block';
                userInfo.style.display = 'none';
            }
        }

        // 搜索功能
        document.getElementById('searchInput').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') {
                performSearch();
            }
        });

        function performSearch() {
            const keyword = document.getElementById('searchInput').value;
            if (keyword) {
                Swal.fire({
                    title: '搜索中...',
                    text: `关键词: ${keyword}`,
                    icon: 'info',
                    timer: 1500,
                    showConfirmButton: false
                });
            }
        }

        // 景区详情功能
        function showDetail(city) {
            const attractions = {
                '贵阳': ['青岩古镇', '黔灵山公园', '天河潭'],
                '遵义': ['遵义会议会址', '赤水丹霞', '茅台镇'],
                '六盘水': ['乌蒙大草原', '妥乐古银杏', '玉舍森林公园'],
                '安顺': ['黄果树瀑布', '龙宫', '天龙屯堡'],
                '毕节': ['百里杜鹃', '织金洞', '草海自然保护区'],
                '铜仁': ['梵净山', '大明边城', '石阡温泉']
            };
            
            const detailInfo = `
                <div style="text-align: center; margin-bottom: 20px;">
                    <h3 style="color: var(--theme-color); margin-bottom: 15px;">${city}热门景区</h3>
                    <div style="display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; margin-top: 20px;">
                        ${attractions[city].map(item => `
                            <div style="background: var(--theme-light); color: var(--theme-color); padding: 10px 15px; border-radius: 20px;">
                                ${item}
                            </div>
                        `).join('')}
                    </div>
                </div>
                <p style="text-align: center; color: var(--text-gray); margin-top: 20px;">
                    点击下方按钮查看详情攻略
                </p>
            `;
            
            Swal.fire({
                title: `${city}旅游推荐`,
                html: detailInfo,
                confirmButtonColor: 'var(--theme-color)',
                background: '#fff',
                showCloseButton: true,
                width: '90%',
                confirmButtonText: '查看详情',
                footer: '<a href="#" style="color: var(--theme-color);">查看该城市全部景点</a>'
            });
        }

        // 生成朋友圈动态
        function renderMoments() {
            const container = document.getElementById('momentsList');
            container.innerHTML = '';
            
            momentsData.forEach(data => {
                const moment = document.createElement('div');
                moment.className = 'moment-container';
                
                moment.innerHTML = `
                    <div class="moment-header">
                        <img src="${data.avatar}" class="moment-avatar" alt="${data.user}的头像">
                        <div class="moment-user">
                            <div class="moment-username">${data.user}</div>
                            <div class="moment-time">${data.time}</div>
                        </div>
                    </div>
                    <div class="moment-content">${data.content}</div>
                    <div class="moment-images" data-count="${data.images.length}">
                        ${data.images.map(img => `
                            <img src="${img}" class="moment-image" alt="美食图片">
                        `).join('')}
                    </div>
                    <div class="moment-actions">
                        <span class="moment-action" onclick="toggleLike(this, ${data.likes})">
                            <i class="far fa-thumbs-up"></i> 赞(${data.likes})
                        </span>
                        <span class="moment-action" onclick="showComment()">
                            <i class="far fa-comment"></i> 评论(${data.comments})
                        </span>
                    </div>
                `;
                
                container.appendChild(moment);
            });
        }

        // 点赞功能
        function toggleLike(btn, baseLikes) {
            const isLiked = btn.classList.contains('liked');
            const likesElement = btn.querySelector('i').nextSibling;
            
            if (isLiked) {
                btn.classList.remove('liked');
                btn.innerHTML = `<i class="far fa-thumbs-up"></i> 赞(${baseLikes})`;
                btn.style.color = 'var(--text-light)';
            } else {
                btn.classList.add('liked');
                btn.innerHTML = `<i class="fas fa-thumbs-up"></i> 已赞(${baseLikes + 1})`;
                btn.style.color = '#1877f2';
            }
        }

        // 评论功能
        function showComment() {
            Swal.fire({
                input: 'text',
                inputLabel: '发表评论',
                inputPlaceholder: '输入你的评论...',
                showCancelButton: true,
                confirmButtonColor: 'var(--theme-color)',
                confirmButtonText: '发送',
                inputValidator: (value) => {
                    if (!value) {
                        return '评论内容不能为空！';
                    }
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    Swal.fire({
                        title: '评论已发布',
                        icon: 'success',
                        timer: 1000,
                        showConfirmButton: false
                    });
                }
            });
        }

        // 初始化导航按钮点击
        function initNavigation() {
            document.querySelectorAll('.nav-btn-container').forEach(btn => {
                btn.addEventListener('click', () => {
                    const page = btn.getAttribute('data-page');
                    showPage(page);
                });
            });
        }
    </script>
</body>
</html>